<template>
  <div class="page-compliance">
      <div class="s-head">
          <!-- <img src="../../public/imgs/hg-head.png"> -->
          <img :src="imgHead">
          <div class="navbar" :class="{'fixed':fixedTop}" ref="nav">
              <div class="li" @click="toggleTab('tab1')" :class="{'active': tabTxt=='tab1'}">备案信息</div>
              <div class="li" @click="toggleTab('tab2')" :class="{'active': tabTxt=='tab2'}">安全保障</div>
          </div>
      </div>
      <div class="nav-con">
          <div class="s-con-1" v-show="tabTxt=='tab1'">
              <div class="hg-1-1"><img :src="hg11"></div>
              <div class="hg-wrap">
                  <div class="hg-title"><img :src="hg1title"></div>
                  <div style="width: 100%;overflow: auto;">
                    <ul class="hg-process">
                      <li>
                          <h1>金融办备案</h1>
                          <div class="flex-1">
                            <p class="li-1-p">细则出台</p>
                            <p class="active">准备资料</p>
                            <p>提交审核</p>
                            <p>完成备案</p>
                          </div>
                          <div class="btnlook"></div>
                      </li>
                      <li>
                          <h1>ICP经营许可证<br/><span>浙B2-20180147</span></h1>
                          <div class="flex-1">
                            <p class="li-2-p">资质准备</p>
                            <p>提交资料</p>
                            <p>工信部审核</p>
                            <p class="active">下发证书</p>
                          </div>
                            
                          <div class="btnlook bgcolor" @click="allMask = true;icpMask = true">查看证书</div>
                      </li>
                      <li>
                          <h1>三级等保测评</h1>
                          <div class="flex-1">
                            <p class="li-3-p">准备阶段</p>
                            <p>方案编制</p>
                            <p>现场测评</p>
                            <p>报告编制</p>
                            <p>完成复审</p>
                            <p class="active">下发证书</p>
                          </div>
                          <div class="btnlook bgcolor" @click="allMask = true;dbMask = true">查看证书</div>
                      </li>
                      <li>
                          <h1>银行存管<br/><span>签约攀枝花银行</span></h1>
                          <div class="flex-1">
                            <p class="li-4-p">攀枝花银行签署协议</p>
                            <p class="active">对接开发</p>
                            <p>正式上线</p>
                          </div>
                          
                          <div class="btnlook bgcolor" @click="allMask = true;cgMask = true">查看协议</div>
                      </li>
                      <li>
                          <h1>电子签名 数字认证</h1>
                          <div class="flex-1">
                            <p class="li-5-p">与法大大签署协议</p>
                            <p class="active">对接开发</p>
                            <p>正式上线</p>
                          </div>
                          <div class="btnlook bgcolor" @click="allMask = true;fddMask = true">查看协议</div>
                      </li>
                       <li>
                          <h1>法律意见书</h1>
                          <div class="flex-1">
                            <p class="li-5-p">协议签署</p>
                            <p class="">尽职调查</p>
                            <p class="active">完成法律意见书</p>
                          </div>
                          <div class="btnlook bgcolor" @click="allMask = true;falvMask = true">查看意见书</div>
                      </li>
                         <li>
                          <h1>专项审计报告</h1>
                          <div class="flex-1">
                            <p class="li-5-p">协议签署</p>
                            <p class="">尽职调查</p>
                            <p class="active">完成专项审计报告</p>
                          </div>
                          <div class="btnlook bgcolor" @click="allMask = true;comptrollerMask = true">查看报告</div>
                      </li>
                      <li class="last">
                      
                      </li>
                    </ul>
                  </div>
                  
              </div>
              <div><img :src="hg12"></div>
          </div>
          <div class="s-con-2" v-show="tabTxt=='tab2'">
              <div v-for="item in hgcon2"><img :src="item"></div>
          </div>
          <div class="mask" v-show="allMask" @click="maskClose()"></div>
          <div class="maskwrap" v-show="icpMask"><img :src="icp" class="testImg1"></div>
          <div class="maskwrap" v-show="dbMask"><img :src="dbao" class="testImg2"></div>
          <div class="maskwrap" v-show="cgMask"><img :src="cgbank" class="testImg3"></div>
          <div class="maskwrap" v-show="fddMask"><img :src="fdd" class="testImg4"></div>
           <div class="maskwrap"  v-show="falvMask">
            <swiper :options="swiperOption" ref="mySwiper"  class="testImg5">
              <swiper-slide  >
                <img :src="falv1">
              </swiper-slide>
              <swiper-slide  >
                 <img :src="falv2" >
              </swiper-slide>
                 <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
             </div>

           <div class="maskwrap"  v-show="comptrollerMask">
            <swiper :options="swiperOption" ref="mySwiper"  class="testImg6">
              <swiper-slide  >
                <img :src="comptroller1">
              </swiper-slide>
              <swiper-slide  >
                 <img :src="comptroller2" >
              </swiper-slide>
               <swiper-slide  >
                 <img :src="comptroller3" >
              </swiper-slide>
                  <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
             </div>
           
      </div>
  </div>
</template>

<script>
var AlloyFinger = require("alloyfinger");
var Transform = require("css3transform");
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "compliance",
   components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
       swiperOption: {
        notNextTick: true,
        autoplay: true,
        autoplay: 3000,
        direction: "horizontal",
        setWrapperSize: true,
        debugger: true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        onTransitionStart(swiper) {}
      },
      imgHead: require("@/public/imgs/hg-head.png"),
      hg11: require("@/public/imgs/hg-1-1.png"),
      hg12: require("@/public/imgs/hg-1-2.png"),
      hg1title: require("@/public/imgs/hg-1-title.png"),
      tabTxt: "tab1",
      hgcon2: [
        require("@/public/imgs/hg-2-1.png"),
        require("@/public/imgs/hg-2-2.png"),
        require("@/public/imgs/hg-2-3.png"),
        require("@/public/imgs/hg-2-4.png"),
        require("@/public/imgs/hg-2-5.png"),
        require("@/public/imgs/hg-2-6.png")
      ],
      allMask: false,
      icpMask: false,
      dbMask: false,
      cgMask: false,
      fddMask: false,
      falvMask:false,
      comptrollerMask:false,
      icp: require("@/public/imgs/cred-big-4.jpg"),
      cgbank: require("@/public/imgs/cred-big-3.jpg"),
      fdd: require("@/public/imgs/fdd.jpg"),
      dbao: require("@/public/imgs/dbao.jpg"),
      falv1:require("@/public/imgs/law_1.jpg"),
      falv2:require("@/public/imgs/law_2.jpg"),
      comptroller1:require("@/public/imgs/comptroller_1.jpg"),
      comptroller2:require("@/public/imgs/comptroller_2.jpg"),
      comptroller3:require("@/public/imgs/comptroller_3.jpg"),
      fixedTop: false,
      top: 0
    };
  },
    computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    toggleTab(tabTxt) {
      this.tabTxt = tabTxt;
    },
    maskClose() {
      this.allMask = false;
      this.icpMask = false;
      this.dbMask = false;
      this.cgMask = false;
      this.fddMask = false;
        this.falvMask=false;
        this.comptrollerMask=false;
    }
  },
  mounted() {

    this.$nextTick(function() {
      this.top = this.$refs.nav.offsetTop; // 元素距离浏览器顶部的高度
    });
    window.onscroll = () => {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //浏览器滚动的高度
      if (scrollTop > this.top) {
        this.fixedTop = true;
      } else {
        this.fixedTop = false;
      }
    };
    var el1 = document.querySelector(".testImg1");
    Transform(el1);
    var initScale = 1;
    new AlloyFinger(el1, {
      multipointStart: function() {
        initScale = el1.scaleX;
      },
      pinch: function(evt) {
        el1.scaleX = el1.scaleY = initScale * evt.zoom;
      },
      // pressMove: function(evt) {
      //   el1.translateX += evt.deltaX;
      //   el1.translateY += evt.deltaY;
      //   evt.preventDefault();
      // },
      multipointEnd: function() {
        if (el1.scaleX < 1) {
          el1.scaleX = el1.scaleY = 1;
        };
      },
      doubleTap: function(evt) {
        if (el1.scaleX >= 1.5) {
          el1.scaleX = el1.scaleY = 1;
        } else {
          el1.scaleX = el1.scaleY = 1.5;
        }
      }
    });
    var el2 = document.querySelector(".testImg2");
    Transform(el2);
    new AlloyFinger(el2, {
      multipointStart: function() {
        initScale = el2.scaleX;
      },
      pinch: function(evt) {
        el2.scaleX = el2.scaleY = initScale * evt.zoom;
      },
      multipointEnd: function() {
        if (el2.scaleX < 1) {
          el2.scaleX = el2.scaleY = 1;
        }
      },
      doubleTap: function(evt) {
        if (el2.scaleX >= 1.5) {
          el2.scaleX = el2.scaleY = 1;
        } else {
          el2.scaleX = el2.scaleY = 1.5;
        }
      }
    });
    var el3 = document.querySelector(".testImg3");
    Transform(el3);
    new AlloyFinger(el3, {
      multipointStart: function() {
        initScale = el3.scaleX;
      },
      pinch: function(evt) {
        el3.scaleX = el3.scaleY = initScale * evt.zoom;
      },
      multipointEnd: function() {
        if (el3.scaleX < 1) {
          el3.scaleX = el3.scaleY = 1;
        }
      },
      doubleTap: function(evt) {
        if (el3.scaleX >= 1.5) {
          el3.scaleX = el3.scaleY = 1;
        } else {
          el3.scaleX = el3.scaleY = 1.5;
        }
      }
    });
    var el4 = document.querySelector(".testImg4");
    Transform(el4);
    new AlloyFinger(el4, {
      multipointStart: function() {
        initScale = el4.scaleX;
      },
      pinch: function(evt) {
        el4.scaleX = el4.scaleY = initScale * evt.zoom;
      },
      multipointEnd: function() {
        if (el4.scaleX < 1) {
          el4.scaleX = el4.scaleY = 1;
        }
      },
      doubleTap: function(evt) {
        if (el4.scaleX >= 1.5) {
          el4.scaleX = el4.scaleY = 1;
        } else {
          el4.scaleX = el4.scaleY = 1.5;
        }
      }
    });

   var el5 = document.querySelector(".testImg5");
    Transform(el5);
    new AlloyFinger(el5, {
      multipointStart: function() {
        initScale = el5.scaleX;
      },
      pinch: function(evt) {
        el5.scaleX = el5.scaleY = initScale * evt.zoom;
      },
      multipointEnd: function() {
        if (el5.scaleX < 1) {
          el5.scaleX = el5.scaleY = 1;
        }
      },
      doubleTap: function(evt) {
        if (el5.scaleX >= 1.5) {
          el5.scaleX = el5.scaleY = 1;
        } else {
          el5.scaleX = el5.scaleY = 1.5;
        }
      }
    });
   var el6 = document.querySelector(".testImg6");
    Transform(el6);
    new AlloyFinger(el6, {
      multipointStart: function() {
        initScale = el6.scaleX;
      },
      pinch: function(evt) {
        el6.scaleX = el6.scaleY = initScale * evt.zoom;
      },
      multipointEnd: function() {
        if (el6.scaleX < 1) {
          el6.scaleX = el6.scaleY = 1;
        }
      },
      doubleTap: function(evt) {
        if (el6.scaleX >= 1.5) {
          el6.scaleX = el6.scaleY = 1;
        } else {
          el6.scaleX = el6.scaleY = 1.5;
        }
      }
    });


  }
};
</script>

<style lang="less">
body,html{
    -webkit-overflow-scrolling:touch; 
}
.page-compliance {
  -webkit-overflow-scrolling:touch; 
  .swiper-container{
    overflow: auto;
  }
  .s-head {
    background: #130f37;
    position: relative;
    height: 485px;
    .navbar {
      position: absolute;
      left: 0;
      width: 100%;
      bottom: 0px;
      padding-top: 20px;
      display: flex;
      justify-content: space-around;
      z-index: 8;
      height: 90px;
      box-sizing: border-box;
      &.fixed {
        position: fixed;
        top: 0;
        background: #130f37;
      }
      .li {
        font-size: 36px;
        color: #fff;
        position: relative;
        &.active:after {
          display: block;
          content: "";
          width: 100%;
          height: 6px;
          background: rgba(255, 189, 51, 0.8);
          position: absolute;
          left: 0;
          bottom: 0px;
        }
      }
    }
  }
  .nav-con {
    .hg-wrap {
      padding: 70px 0px;
      background: #f8f8f8;
      .hg-process {
        display: flex;
        width: 1370px;
        overflow-x: auto;
        margin-top: 60px;
        padding: 0 20px;
        box-sizing: border-box;
        li {
          width: 250px;
          height: 460px;
          flex-shrink: 0;
          margin-right: 20px;
          background: #fff;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
          border: 1px solid #eee;
          border-radius: 6px;
          padding-top: 30px;
          box-sizing: border-box;
          position: relative;
          display: flex;
          flex-direction: column;
          h1 {
            font-size: 26px;
            color: #444;
            text-align: center;
            height: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              color: #999;
              font-size: 12px;
              padding-top: 5px;
              display: inline-block;
            }
          }
          .flex-1 {
            flex: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;
          }
          p {
            text-align: center;
            font-size: 26px;
            color: #999;
            margin-bottom: 20px;
            &.active {
              color: #444fb9;
            }
          }
          .btnlook {
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-radius: 0 0 6px 6px;
            color: #333;
            text-align: center;
          }
          .bgcolor {
            background: #ffbd33;
          }
        }
        .last{
          width: 5px;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  .maskwrap {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 8;
    transform: translate(-50%, -50%);
    z-index: 9;
    width: 90%;
    -webkit-user-drag: none;
    // overflow: auto;
    img {
      width: 100%;
      -webkit-user-drag: none;
      // transform: scale(2);
    }
  }
}
</style>
